<template>
  <div class="ali-auth">
    <template v-if="state.data.length">
      <SwipeCell v-for="item in state.data"
        :key="item.id">
        <Card :desc="item.accountName"
          :title="item.account"
          :thumb="withdrawType[item.method]">
          <template #tags>
            <Tag plain type="primary">
              {{ WithdrawMethodType[item.method] }}
            </Tag>
          </template>
          <template #thumb>
            <div class="thumb">
              <Image
                :src="withdrawType[item.method]"
                class="image" radius="4"
                fit="contain" />
            </div>
          </template>
        </Card>
        <template #right>
          <div class="delete-button">
            <Button text="编辑" type="primary"
              class="button" square
              @click="handleOperate(item)" />
            <Button text="删除" type="danger"
              class="button" square
              @click="handleDel(item)" />
          </div>
        </template>
      </SwipeCell>
    </template>

    <Empty v-if="!state.data.length"
      description="暂无账户，请添加提现账号" />
    <SkeletonCard v-if="state.loading" />

    <div class="btn">
      <Button type="primary" block
        @click="handleOperate()">添加提现账户</Button>
      <div class="tips">
        每个用户可绑定5个自己名下实名提现账户
      </div>
    </div>
  </div>
  <Modals />
</template>
<script setup lang="ts">
import {
  Button,
  Card, Empty, Image, showDialog, showNotify, SwipeCell, Tag,
} from 'vant';
import { onMounted } from 'vue';

import SkeletonCard from '@/components/SkeletonCard.vue';

import { delWithdrawAccount } from '../api';
import Modals, { ModalWithdrawOperate } from '../components';
import { withdrawType } from '../config';
import { WithdrawMethodType } from '../const';
import useWithdrawAccount from '../hooks/useWithdrawAccount';
import type { WithdrawAccountItem } from '../models/WithdrawAccount';

const { state, fetchData } = useWithdrawAccount();

onMounted(async () => {
  await fetchData();
});

const handleOperate = (record?: WithdrawAccountItem) => {
  ModalWithdrawOperate.show({
    title: record ? '编辑账号' : '新增账号',
    record,
    reload: () => fetchData(),
  });
};

const handleDel = (account: WithdrawAccountItem) => {
  showDialog({
    title: '删除账号',
    message: '确定删除该账号吗？',
    showCancelButton: true,
  }).then(async (value) => {
    if (value === 'confirm') {
      try {
        state.value.loading = true;
        await delWithdrawAccount(`${account.id}`);
        await fetchData();
        showNotify({ type: 'success', message: '删除成功' });
      } catch (error) {
        //
      } finally {
        state.value.loading = false;
      }
    }
  });
};
</script>
<style lang="less" scoped>
.ali-auth {
  height: 100%;
  display: flex;
  flex-direction: column;

  .thumb {
    height: var(--van-card-thumb-size);
    background-color: var(--van-gray-2);
    border-radius: var(--van-radius-md);
    display: flex;

    .image {
      height: calc(var(--van-card-thumb-size) - 40%);
      padding: 5px;
      margin: auto;
    }
  }

  .btn {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 16px;

    .tips {
      font-size: 12px;
      color: var(--van-gray-6);
      text-align: center;
      margin-top: 16px;
    }
  }

  .delete-button {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;

    .button {
      height: 100%;
    }
  }
}
</style>
